<template>
	<view>
		<block v-if="videoStream">
			<!-- #ifdef H5 -->
			<video ref="myVideo" id="myVideo" :src="videoStream" class="main-video" x5-playsinline playsinline="true"
			 webkit-playsinline="true" x-webkit-airplay="true" x5-video-player-type="h5" x5-video-player-fullscreen
			 x5-video-orientation="portraint" @error="videoErrorCallback" @timeupdate="videoPlaying" autoplay="true" object-fit="cover"
			 loop="true" muted></video>
			<!-- #endif -->
		</block>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		created: function(e) {},
		data() {
			return {
				videoStream: null,
				videoContext: null,
				vpath: ''
			}
		},
		methods: {
			playLive(videoStream) {
				this.videoStream = videoStream
				console.log(videoStream)
				
				// #ifdef H5
				this.videoContext = uni.createVideoContext('myVideo')
				this.$nextTick((r) => {
					this.videoContext.play()
				})
				// #endif
			},
			message(e){
			},
			videoPlaying(e) {
				if (e.detail.currentTime > 0) {
					this.tp = Date.parse(new Date())
					if (this.tpError) {
						this.tpError = false
						uni.hideLoading()
					}
				}
			},
			videoErrorCallback: function(e) {
				console.log(e)
			},
		},
	}
</script>

<style>
	.main-video {
		width: 100%;
		height: 100%;
		background-color: rgb(0, 0, 0, 0);
		/* z-index: -1; */
		position: absolute;
	}
</style>
